<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<style>
    .form-select{width: 100%;padding: 3px 0;}
</style>
<section class="content" id="essay-catalog-app">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>描述</th>
                    <th>父级目录</th>
                    <th>排序</th>
                    <th>封面</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,i) in list">
                    <td>{{item.id}}</td>
                    <td><input v-model="item.name"></td>
                    <td><input v-model="item.description"></td>
                    <td>
                        <select class="form-select" v-model="item.parent_id">
                            <option value="0">一级目录</option>
                            <option v-for="(v,k) in list" v-if="v.id!=item.id" :value="v.id">{{v.name}}</option>
                        </select>
                    </td>
                    <td><input v-model="item.rank"></td>
                    <td>
                        <file-uploader  v-model="item.picture" filetype="image" oss="true" policyUrl="/alioss/get_policy"></file-uploader>
                    </td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="save(item)">保存</a>
                        <a class="btn btn-danger btn-xs" @click="del(item, i)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="page.last" v-model="page.page"></page>
                    </td>
                </tr>
                <tr>
                    <td colspan="100">
                        <a class="btn btn-default" @click="getList">刷新</a>
                        <a class="btn btn-info" @click="add">添加</a>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</section>
<!-- /.content -->

<script>
    var essay_catalog_app = new Vue({
        el: '#essay-catalog-app',
        data: {
            list: [],
            branch:[],
            page: {
                rows: 100,
                page: 1,
                last: 0
            }
        },
        created: function () {
            this.getBranch();
            this.getList();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/essays/catalog_list',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.data;
                        console.log(this.list);
                        this.page.last = resp.last_page;
                    }.bind(this)
                });
            },
            getBranch: function () {
                ajax({
                    uri: '/essays/branch',
                    success: function(resp){
                        this.branch = resp.data;
                    }.bind(this)
                });
            },
            add: function () {
                this.list.push({rank: 255})
            },
            save: function (item) {
                ajax({
                    uri: '/essays/catalog_save',
                    data: item,
                    success: function(resp){
                        this.getList();
                    }.bind(this)
                });
            },
            del: function (item,i) {
                if (item.id === undefined) {
                    this.list.splice(i, 1);
                    return;
                }
                if (confirm('确定要删除吗？') === false) return;
                ajax({
                    uri: '/essays/catalog_del',
                    data: {id: item.id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            turnPage: function (offset) {
                this.page.offset = offset;
            }
        },
        watch: {
            'page.offset': function (nv, ov) {
                this.getList();
            }
        }
    })
</script>